<template>
	<view class="container b-f">
		<!-- 头部背景图 -->
		<view class="agent-bg"><image mode="widthFix" :src="background"></image></view>
		<view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
			<form @submit="formSubmit" report-submit="true" style="z-index: 3;">
				<!-- 提现佣金 -->
				<view class="widget widget__capital m-top20 b-f dis-flex flex-dir-column">
					<view class="capital__item dis-flex flex-x-between flex-y-center">
						<view class="item__left">可提现佣金：</view>
						<view class="item__right c-violet">
							<text class="f-24">￥</text>
							<text class="f-34">{{ agent.money }}</text>
						</view>
					</view>
					<view class="capital__item dis-flex flex-y-center">
						<view class="item__left">提现金额：</view>
						<view class="item__right flex-box"><input name="money" placeholder="请输入要提取的金额" v-model="name" /></view>
					</view>
				</view>
				<!-- 最低提现金额 -->
				<view class="capital__lowest m-top20 f-24 col-7 t-r">最低提现佣金{{ settlement.min_money }}元</view>

				<!-- 提现方式 -->
				<view class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
					<view class="form__title f-28">提现方式</view>
					<view class="form__box">
						<block v-for="(item, index) in settlement.pay_type" :key="index">
							<block v-if="item == 10">
								<!-- 微信支付 -->
								<view class="form__field dis-flex flex-y-center">
									<view class="form__radio dis-flex flex-y-center" @tap.stop="toggleChecked" data-payment="10">
										<text class="radio__icon iconfont icon-radio" :class="{ 'c-violet': payment == 10, 'col-bb': payment != 10 }"></text>
										<text class="f-28">微信支付</text>
									</view>
								</view>
							</block>
							<block v-if="item == 20">
								<!-- 支付宝 -->
								<view class="form__field dis-flex flex-y-center">
									<view class="form__radio dis-flex flex-y-center" @tap.stop="toggleChecked" data-payment="20">
										<text class="radio__icon iconfont icon-radio" :class="{ 'c-violet': payment == 20, 'col-bb': payment != 20 }"></text>
										<text class="f-28">支付宝</text>
									</view>
								</view>
								<block v-if="payment == 20">
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box"><input name="alipay_name" placeholder="请输入姓名" /></view>
									</view>
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box"><input name="alipay_account" placeholder="请输入支付宝账号" /></view>
									</view>
								</block>
							</block>
							<block v-if="item == 30">
								<!-- 银行卡 -->
								<view class="form__field dis-flex flex-y-center">
									<view class="form__radio dis-flex flex-y-center" @tap.stop="toggleChecked" data-payment="30">
										<text class="radio__icon iconfont icon-radio" :class="{ 'c-violet': payment == 30, 'col-bb': payment != 30 }"></text>
										<text class="f-28">银行卡</text>
									</view>
								</view>
								<block v-if="payment == 30">
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box"><input name="bank_name" placeholder="请输入姓名" value="" /></view>
									</view>
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box"><input name="bank_account" placeholder="请输入开户行名称/地址" value="" /></view>
									</view>
									<view class="form__field dis-flex flex-y-center">
										<view class="field-input flex-box"><input name="bank_card" placeholder="请输入银行卡号" value="" /></view>
									</view>
								</block>
							</block>
						</block>
					</view>
				</view>
				<!-- 提交申请 -->
				<view class="form-submit dis-flex flex-x-center"><button formType="submit" :disabled="disabled">提交申请</button></view>
			</form>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			isData: false,
			background: '',
			agent: {},
			words: {},
			payment: 20,
			settlement: {},
			name: '',
			disabled: false
		};
	},
	onShow: function() {
		// 获取分销商提现信息
		this.getAgentWithdraw();
	},
	methods: {
		/**
		 * 获取分销商提现信息
		 */
		getAgentWithdraw() {
			this.$get(this.$api.getUserAgentWithdraw, {}, res => {
				let data = res.data;
				data.isData = true;
				data['payment'] = data.settlement.pay_type[0];
				this.background = data.background;
				this.agent = data.agent;
				this.isData = data.isData;
				this.payment = data.payment;
				this.settlement = data.settlement;
			});
		},
		/**
		 * 切换提现方式
		 */
		toggleChecked(e) {
			this.payment = e.currentTarget.dataset.payment;
		},
		/**
		 * 提交申请
		 */
		formSubmit: function(e) {
			let values = e.detail.value;

			// 记录formId
			this.$saveFormId(e.detail.formId);

			// 验证可提现佣金
			if (this.agent.money <= 0) {
				Tools.showError('当前没有可提现佣金');
				return false;
			}
			// 验证提现金额
			if (!values.money || values.money.length < 1) {
				Tools.showError('请填写提现金额');
				return false;
			}
			// 按钮禁用
			this.disabled = true;
			// 提现方式
			values['pay_type'] = this.payment;
			// 数据提交
			this.$post(
				this.$api.getUserAgentWithdrawSubmit,
				{ data: JSON.stringify(values) },
				res => {
					this.getAgentWithdraw();
					Tools.showError(res.msg, ()=> {
						Route.navigateTo({
							url: '../list/list'
						});
					});
				},
				null,
				() => {
					this.disabled = false;
				}
			);
		}
	}
};
</script>

<style>
page {
	background: #fff;
}

.c-violet {
	color: #786cff;
}

.col-bb {
	color: #bbb;
}

.agent-bg image {
	width: 100%;
}

.widget-body .widget {
	width: 700rpx;
	box-sizing: border-box;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
	border-radius: 12rpx;
}

/* 提现金额 */

.widget__capital {
	padding: 10rpx 0;
	margin-top: -60rpx;
}

.widget__capital .capital__item {
	height: 80rpx;
	padding: 10rpx 35rpx;
	font-size: 28rpx;
	border-bottom: 1rpx solid #e7e7e7;
	box-sizing: border-box;
}

.widget__capital .capital__item:last-child {
	border-bottom: none;
}

.widget__capital .capital__item .item__left {
	margin-right: 20rpx;
}

.capital__lowest {
	width: 700rpx;
	padding-right: 20rpx;
	box-sizing: border-box;
}

/* 提现方式 */

.widget__form {
	padding: 10rpx 0 20rpx 0;
}

.widget__form .form__title {
	padding: 16rpx 35rpx;
	border-bottom: 1rpx solid #e7e7e7;
}

.widget__form .form__box {
	padding: 20rpx 35rpx;
}

.widget__form .form__field {
	height: 80rpx;
	padding: 0;
	box-sizing: border-box;
	font-size: 28rpx;
}

.widget__form .form__field .radio__icon {
	font-size: 38rpx;
	margin-right: 12rpx;
}

.widget__form .form__field .field-input input {
	background-color: #f9f9f9;
	height: 70rpx;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
}

/* 提交申请 */

.form-submit {
	margin-top: 40rpx;
}

.form-submit button {
	font-size: 30rpx;
	background: #786cff;
	border: 1rpx solid #786cff;
	color: white;
	border-radius: 50rpx;
	padding: 0 120rpx;
}

.form-submit button[disabled] {
	background: #8e84fc;
	border-color: #8e84fc;
	color: white;
}
</style>
